<template>
    <div class="login">
        <div class="login-wrapper">
            <h2>WELCOME</h2>
            <el-form :model="user"  :rules='rules' class='form'>
                <el-form-item label='用户' prop='name'>
                    <el-input v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item label='密码' prop='pwd'>
                    <el-input v-model="user.pwd" type="password"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="fndebounce">登录</el-button>
                </el-form-item>
            </el-form>
            <p>
                <span>注册账号</span>|
                <span>忘记密码</span>
            </p>
        </div>
    </div>
</template>

<script>
    import instance from '../api'
    import debounce from '../plugin/debounce'
    export default {
        name:"Login",
        data(){
            return {
                user:{
                    name:'lisi',
                    pwd:'123456'
                },
                rules:{
                    name:[
                        {
                            message:'用户名错误',
                            trigger:'blur', 
                            pattern:/^\w{5,10}$/,
                        }
                    ],
                    pwd:[
                        {
                            message:'密码错误',
                            trigger:'blur', 
                            pattern:/123456/,  
                        }
                    ]
                }
            }
        },
        created(){
            // 业务函数防抖封装
            this.fnajax = debounce(this.fn)
        },
        methods:{
            // 业务函数
            fndebounce(){
                this.fnajax()
            },
            async fn(){
                let name = this.user.name;
                let pwd = this.user.pwd;

                let {data} = await instance.get("/users",{params:{name,pwd}})
                if(data.length>0){
                    let token = data[0].token;
                    localStorage.setItem('token',token)
                    this.$message({
                        showClose:true,//弹窗可以关闭
                        message: '登录成功',//弹出的内容
                        type: 'success',
                        onClose:()=>{//弹窗关闭时跳转到主页
                            this.$router.push({name:'Home'})
                        }
                    });
                }else{
                    alert('用户名或密码错误')
                }
            }
        }

    }
</script>

<style scoped>
    .login{
        width: 100vw;
        height: 100vh;
        background:#2d3a4b;
        background:url(../assets/bg.png) no-repeat;
        background-size:100% 100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .login-wrapper{
        width:450px;
        height:320px;
        background:#b5c0da;
        border-radius:10px;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
    }
    h2{
        width: 100%;
        color:#faf7f8;
        display:flex;
        justify-content:center;
    }
    .form{
        width: 100%;
        margin-top:-15px;
    }
    .el-form-item{
        display:flex;
        justify-content:center;
    }
    .el-form-item .el-input{
        width: 165px;
        height: 28px;
    }
    .el-form-item .el-button{
        width: 205px;
    }
    p{
        color:#faf7f8;
        margin-top:-40px;
    }
    p span{
        cursor: pointer;
    }
</style>